// 果园水果产量分析
function xzzc_top_e() {
    var myChart = echarts.init(document.querySelector(".xzzc_top_e"));
    var legendData = ["车辆数"]; //图例


    var indicator = [
        {
            text: "苹果",
            max: 2500,
        },
        {
            text: "桃子",
            max: 2500,
        },
        {
            text: "杏",
            max: 3500,
        },
        {
            text: "火龙果",
            max: 5500,
        },
        {
            text: "大枣",
            max: 7500,
        },
        {
            text: "葡萄",
            max: 1500,
        },
        {
            text: "草莓",
            max: 1500,
        },
        {
            text: "梨",
            max: 1500,
        },
    ];
    var dataArr = [

        {
            value: ["1200", "1000", "800", "1270", "1365", "1350", "1365", "1350"],
            name: legendData[1],
            itemStyle: {
                normal: {
                    lineStyle: {
                        color: "#4BFFFC",
                        // shadowColor: '#4BFFFC',
                        // shadowBlur: 10,
                    },
                    shadowColor: "#4BFFFC",
                    shadowBlur: 10,
                },
            },
            areaStyle: {
                normal: {
                    // 单项区域填充样式
                    color: {
                        type: "linear",
                        x: 0, //右
                        y: 0, //下
                        x2: 1, //左
                        y2: 1, //上
                        colorStops: [
                            {
                                offset: 0,
                                color: "#0D60A1",
                            },
                            {
                                offset: 0.5,
                                color: "rgba(26, 255, 228, 0.001)",
                            },
                            {
                                offset: 1,
                                color: "#1AFFE4",
                            },
                        ],
                        globalCoord: false,
                    },
                    opacity: 0.6, // 区域透明度
                },
            },
        },
    ];
    var colorArr = ["#1AFFE4", "#4BFFFC"]; //颜色
    option = {
        tooltip: {
            show: true,
            trigger: "item",
        },
        color: colorArr,
        legend: {
            orient: "vertical",
            icon: "circle", //图例形状
            data: legendData,
            bottom: 0,
            right: 0,
            itemWidth: 14, // 图例标记的图形宽度。[ default: 25 ]
            itemHeight: 14, // 图例标记的图形高度。[ default: 14 ]
            itemGap: 21, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
            textStyle: {
                fontSize: 11,
                color: "#00E4FF",
            },
        },
        radar: {
            // shape: 'circle',
            name: {
                textStyle: {
                    color: "#fff",
                    fontSize: 11,
                },
            },
            indicator: indicator,
            splitArea: {
                // 坐标轴在 grid 区域中的分隔区域，默认不显示。
                show: true,
                areaStyle: {
                    // 分隔区域的样式设置。
                    color: ["#042253", "#062D66"], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
                },
            },
            axisLine: {
                //指向外圈文本的分隔线样式
                lineStyle: {
                    color: "#153269",
                },
            },
            splitLine: {
                lineStyle: {
                    color: "#113865", // 分隔线颜色
                    width: 1, // 分隔线线宽
                },
            },
        },
        series: [
            {
                type: "radar",
                symbolSize: 8,
                // symbol: 'angle',
                data: dataArr,
                itemStyle: {
                    color: "#17DFD1",
                    borderColor: "#17DFD1",
                    // borderWidth: 0.1,
                },
            },
        ],
    };

    // 3. 把配置项给实例对象
    myChart.setOption(option);
    // 4. 让图表跟随屏幕自动的去适应
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}
// 果园销售量及销售金额分析
function xzzc_bottom_e() {
    var chartDom = document.querySelector(".xzzc_bottom_e");
    var myChart = echarts.init(chartDom);

    var option = {
        tooltip: {
            trigger: "axis",
            // 鼠标放上去的刻度线的颜色
            axisPointer: {
                lineStyle: {
                    color: "#dddc6b"
                }
            }
        },
        // legend: {
        //   top: "0%",
        //   textStyle: {
        //     color: "rgba(255,255,255,.5)",
        //     fontSize: "12"
        //   }
        // },
        grid: {
            left: "0%",
            top: "3%",
            right: "3%",
            bottom: "4%",
            containLabel: true
        },

        xAxis: [
            {
                type: "category",
                boundaryGap: false,
                axisLabel: {
                    textStyle: {
                        color: "#fff",
                        // color: "rgba(255,255,255,.6)",
                        fontSize: "1.4rem"
                    }
                },
                axisLine: {
                    lineStyle: {
                        width: 1,
                        color: "rgba(255,255,255,.2)"
                    }
                },
                // 网格线
                splitLine: {
                    show: true,
                    lineStyle: {
                        // color: "rgba(255,255,255,.1)"
                        type: "dashed",
                        color: "#35466E",
                        width: 1
                    }
                },
                data: ["01月", "03月", "06月", "09月", "12月"]
            },

            {
                axisPointer: { show: false },
                axisLine: { show: false },
                position: "bottom",
                offset: 20
            }
        ],

        yAxis: [
            {
                type: "value",
                //  去除刻度
                axisTick: { show: true },

                // y轴的刻度线
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                        width: 1
                    }
                },
                //y轴的字体颜色
                axisLabel: {
                    textStyle: {
                        color: "#A5B6D3",
                        fontSize: "1.4rem"
                    }
                },
                //y轴分格线
                splitLine: {
                    show: true,
                    lineStyle: {
                        // color: "rgba(255,255,255,.1)"
                        type: "dashed",
                        color: "#35466E",
                        width: 1
                    }
                }
            }
        ],
        series: [
            {
                // name: "播放量",
                name: "播放量",
                type: "line",
                smooth: true, //显示曲线
                symbol: "circle",
                symbolSize: 15,
                showSymbol: false, //显示每个折现的点
                lineStyle: {
                    normal: {
                        color: "#1890FF",
                        width: 2
                    }
                },
                // 折线图等的阴影
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: "rgba(1, 132, 213, 0.4)"
                                },
                                {
                                    offset: 0.8,
                                    color: "rgba(1, 132, 213, 0.1)"
                                    //   color: "#1AFFE4"
                                }
                            ],
                            false
                        ),
                        shadowColor: "rgba(0, 0, 0, 0.1)"
                    }
                },
                itemStyle: {
                    normal: {
                        color: "#1890FF",
                        borderColor: "rgba(221, 220, 107, .1)",
                        borderWidth: 12
                    }
                },
                symbol: "circle",
                // 拐点大小
                symbolSize: 15,
                // 设置拐点颜色以及边框
                itemStyle: {
                    color: "#1890FF",
                    borderColor: "rgba(221, 220, 107, .1)",
                    borderWidth: 12
                },
                // 开始不显示拐点， 鼠标经过显示
                symbol: "circle",
                // 拐点大小
                symbolSize: 15,
                // 设置拐点颜色以及边框
                itemStyle: {
                    color: "#1890FF",
                    borderColor: "rgba(221, 220, 107, .1)",
                    borderWidth: 12
                },
                // 开始不显示拐点， 鼠标经过显示
                showSymbol: false,
                data: [230, 140, 230, 240, 1030]
            },
            {
                name: "联盟广告",
                type: "line",
                smooth: true,
                lineStyle: {
                    normal: {
                        color: "#1AFFE4",
                        width: 2
                    }
                },
                // 折线图等的阴影

                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: "rgba(0, 216, 135, 0.4)"
                                },
                                {
                                    offset: 0.8,
                                    color: "rgba(0, 216, 135, 0.1)"
                                }
                            ],
                            false
                        ),
                        shadowColor: "rgba(0, 0, 0, 0.1)"
                    }
                },
                // 设置拐点 小圆点
                symbol: "circle",
                // 拐点大小
                symbolSize: 15,
                // 设置拐点颜色以及边框
                itemStyle: {
                    color: "#1AFFE4",
                    borderColor: "rgba(221, 220, 107, .1)",
                    borderWidth: 12
                },
                // 开始不显示拐点， 鼠标经过显示
                showSymbol: false,
                data: [30, 440, 530, 140, 1030]
            }
        ]
    };

    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });

}
//水果行情走势
function gyxsje() {
    var chartDom = document.querySelector(".gyxsje");
    var myChart = echarts.init(chartDom);

    var lineitemStyle = {
        normal: {
            color: "rgba(0, 0, 0, 0)",
            borderColor: "#fff",
            borderWidth: 2,
            shadowColor: "rgba(0, 0, 0, .6)",
            shadowBlur: 0,
            shadowOffsetY: 2,
            shadowOffsetX: 2,
        },
    };
    option = {

        // title: {
        //     text: "Bar-Line 结合",
        //     textStyle: {
        //         fontWeight: "normal",
        //         fontSize: 16,
        //         color: "#fff",
        //     },
        // },
        tooltip: {
            trigger: "axis",
            backgroundColor: "rgba(0,0,0,0.9)",
            // formatter: function (prams) {
            //     return "" + prams[0].data + "%";
            // },
        },
        grid: {
            left: "0%",
            top: "13%",
            right: "10%",
            bottom: "30%",
            containLabel: true
        },
        dataZoom: [
            {
                show: false,
                height: 30,
                xAxisIndex: [0],
                bottom: 0,
                type: "slider",
                start: 1,
                end: 100,
                handleIcon:
                    "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
                handleSize: "110%",
                handleStyle: {
                    color: "#555",
                },
            },
        ],

        xAxis: {
            data: [
                "04-15",
                "04-16",
                "04-17",
                "04-18",
                "04-19",
                "04-20",
                "04-21",
                "04-22",
                "04-23",
                "04-24",
                "04-25",
                "04-26",
            ],

            axisTick: {
                show: false,
            },

            axisLine: {
                show: true,
            },
            axisLabel: {
                textStyle: {
                    color: "#fff",
                    // color: "rgba(255,255,255,.6)",
                    fontSize: 14
                }
            },
        },
        yAxis: [
            {
                type: "value",
                nameTextStyle: {
                    color: "#000",
                    fontSize: 16,
                },
                splitLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: "#26D9FF",
                        width: 1,
                    },
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: "rgba(250,250,250,0.6)",
                        fontSize: 14,
                    },
                },
            },
            {
                type: "value",
                /*name: "同比",*/
                nameTextStyle: {
                    color: "#ebf8ac",
                    fontSize: 16,
                },
                position: "right",
                splitLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                axisLabel: {
                    show: true,
                    formatter: "{value} %", //右侧Y轴文字显示
                    textStyle: {
                        color: "rgba(250,250,250,0.6)",
                        fontSize: 16,
                    },
                },
            },
        ],

        series: [
            {

                type: "scatter",
                symbolSize: 7, //里面的圈大小
                itemStyle: {
                    color: {
                        type: "radial",
                        r: 3,
                        colorStops: [
                            {
                                offset: 0,
                                color: "#1AFFE4",
                            },
                            {
                                offset: 1,
                                color: "#1AFFE4",
                            },
                        ],
                        global: false,
                    },
                },
                silent: true,
                data: [34, 35, 45, 65, 67, 43, 24, 46, 34, 23, 23, 63],
            },
            {
                name: "拆线",
                type: "line",
                stack: "总量",
                symbolSize: 25,
                symbol: "circle",
                label: {
                    normal: {
                        show: false,
                        position: "top",
                        formatter: "{c}%",
                        color: "#fff",
                    },
                },
                itemStyle: lineitemStyle,

                lineStyle: {
                    normal: {
                        color: "#394A6C",
                        width: 1.5,
                        shadowColor: "rgba(0,0,0,0)",
                        shadowBlur: 0,
                        shadowOffsetY: 5,
                        shadowOffsetX: 5,
                    },
                },
                data: [34, 35, 45, 65, 67, 43, 24, 46, 34, 23, 23, 63],
            },
            {

                name: "柱子",
                type: "bar",
                barGap: "-100%",
                barWidth: 30,
                label: {
                    normal: {
                        color: "#00f3fb",
                    },
                },
                itemStyle: {
                    normal: {
                        borderColor: "rgba(255, 255, 255, .1)",
                        borderWidth: "0",
                        barBorderRadius: 0,
                        color: "#0F214A",
                    },
                },
                z: -12,
                data: [
                    100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100,
                    100, 100, 100, 100,
                ],
            },
        ],
    };
    // 3. 把配置项给实例对象
    myChart.setOption(option);
    // 4. 让图表跟随屏幕自动的去适应
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}

// 果园库存
function gykcecharts(category) {
    var chartDom = document.querySelector(".gykcecharts");
    var myChart = echarts.init(chartDom);

    // var category = ; // 类别
    var total = 10000; // 数据总数
    var datas = [];
    category.forEach((value) => {
        datas.push(value.value);
    });
    option = {
        // backgroundColor: "#071347",
        xAxis: {
            max: total,
            splitLine: {
                show: false,
            },
            axisLine: {
                show: false,
            },
            axisLabel: {
                show: false,
            },
            axisTick: {
                show: false,
            },
        },
        grid: {
            left: "10%",
            top: "0%",
            right: "12%",
            bottom: "0%",
            containLabel: true
        },
        yAxis: [
            {
                type: "category",
                inverse: false,
                data: category,
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    show: false,
                },
            },
        ],
        series: [
            {
                // 内
                type: "bar",
                barWidth: 18,

                legendHoverLink: false,
                silent: true,
                itemStyle: {
                    normal: {
                        color: function (params) {
                            var color;
                            if (params.dataIndex == 19) {
                                color = {
                                    type: "linear",
                                    x: 0,
                                    y: 0,
                                    x2: 1,
                                    y2: 0,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: "#EB5118", // 0% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: "#F21F02", // 100% 处的颜色
                                        },
                                    ],
                                };
                            } else if (params.dataIndex == 18) {
                                color = {
                                    type: "linear",
                                    x: 0,
                                    y: 0,
                                    x2: 1,
                                    y2: 0,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: "#FFA048", // 0% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: "#B25E14", // 100% 处的颜色
                                        },
                                    ],
                                };
                            } else if (params.dataIndex == 17) {
                                color = {
                                    type: "linear",
                                    x: 0,
                                    y: 0,
                                    x2: 1,
                                    y2: 0,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: "#F8E972", // 0% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: "#E5C206", // 100% 处的颜色
                                        },
                                    ],
                                };
                            } else {
                                color = {
                                    type: "linear",
                                    x: 0,
                                    y: 0,
                                    x2: 1,
                                    y2: 0,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: "#1588D1", // 0% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: "#0F4071", // 100% 处的颜色
                                        },
                                    ],
                                };
                            }
                            return color;
                        },
                    },
                },
                //   左侧title
                label: {
                    normal: {
                        show: true,
                        position: "left",
                        formatter: "{b}",
                        textStyle: {
                            color: "#fff",
                            fontSize: 14,
                        },
                    },
                },
                data: category,
                z: 1,
                animationEasing: "elasticOut",
            },
            {
                // 分隔
                type: "pictorialBar",
                itemStyle: {
                    normal: {
                        color: "#061348",
                    },
                },
                symbolRepeat: "fixed",
                symbolMargin: 6,
                symbol: "rect",
                symbolClip: true,
                symbolSize: [1, 21],
                symbolPosition: "start",
                symbolOffset: [1, -1],
                symbolBoundingData: this.total,
                data: category,
                z: 2,
                animationEasing: "elasticOut",
            },
            {
                // 外边框
                type: "pictorialBar",
                symbol: "rect",
                symbolBoundingData: total,
                itemStyle: {
                    normal: {
                        color: "none",
                    },
                },
                label: {
                    normal: {
                        formatter: (params) => {
                            var text;
                            if (params.dataIndex == 1) {
                                //   text = "{a|  100%}{f|  " + params.data + "}";
                                text = "{f|  " + params.data + "}";

                            } else if (params.dataIndex == 2) {
                                text = "{b| }{f|  " + params.data + "}";
                            } else if (params.dataIndex == 3) {
                                text = "{c|  }{f|  " + params.data + "}";
                            } else {
                                text = "{d| }{f|  " + params.data + "}";
                            }
                            return text;
                        },
                        rich: {
                            a: {
                                color: "red",
                            },
                            b: {
                                color: "blue",
                            },
                            c: {
                                color: "yellow",
                            },
                            d: {
                                color: "green",
                            },
                            f: {
                                color: "#ffffff",
                            },
                        },
                        position: "right",
                        distance: 0, // 向右偏移位置
                        show: true,
                    },
                },
                data: datas,
                z: 0,
                animationEasing: "elasticOut",
            },
            {
                name: "外框",
                type: "bar",
                barGap: "-120%", // 设置外框粗细
                data: [
                    total,
                    total,
                    total,
                    total,
                    total,
                    total,
                    total,
                    total,
                    total,
                    total,
                    total,
                    total,
                    total,
                    total,
                    total,
                    total,
                    total,
                    total,
                    total,
                    total,
                ],
                barWidth: 25,

                itemStyle: {
                    normal: {
                        color: "transparent", // 填充色
                        barBorderColor: "#1C4B8E", // 边框色
                        barBorderWidth: 1, // 边框宽度
                        // barBorderRadius: 0, //圆角半径
                        label: {
                            // 标签显示位置
                            show: false,
                            position: "top", // insideTop 或者横向的 insideLeft
                        },
                    },
                },
                z: 0,
            },
        ],
    };

    // 3. 把配置项给实例对象
    myChart.setOption(option);
    // 4. 让图表跟随屏幕自动的去适应
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}

// 果园营收排名 
function gyyscharts(MAX, VALUE) {
    var myChart = echarts.init(document.querySelector(".gyyscharts"));
    console.log(myChart, 'myChart')
    const CubeLeft = echarts.graphic.extendShape({
        shape: {
            x: 0,
            y: 0
        },
        buildPath: function (ctx, shape) {
            const xAxisPoint = shape.xAxisPoint;
            const c0 = [shape.x, shape.y];
            const c1 = [shape.x - 6, shape.y - 6];
            const c2 = [xAxisPoint[0] - 6, xAxisPoint[1] - 6];
            const c3 = [xAxisPoint[0], xAxisPoint[1]];
            ctx
                .moveTo(c0[0], c0[1])
                .lineTo(c1[0], c1[1])
                .lineTo(c2[0], c2[1])
                .lineTo(c3[0], c3[1])
                .closePath();
        }
    });
    const CubeRight = echarts.graphic.extendShape({
        shape: {
            x: 0,
            y: 0
        },
        buildPath: function (ctx, shape) {
            const xAxisPoint = shape.xAxisPoint;
            const c1 = [shape.x, shape.y];
            const c2 = [xAxisPoint[0], xAxisPoint[1]];
            const c3 = [xAxisPoint[0] + 10, xAxisPoint[1] - 6];
            const c4 = [shape.x + 10, shape.y - 6];
            ctx
                .moveTo(c1[0], c1[1])
                .lineTo(c2[0], c2[1])
                .lineTo(c3[0], c3[1])
                .lineTo(c4[0], c4[1])
                .closePath();
        }
    });
    const CubeTop = echarts.graphic.extendShape({
        shape: {
            x: 0,
            y: 0
        },
        buildPath: function (ctx, shape) {
            const c1 = [shape.x, shape.y];
            const c2 = [shape.x + 10, shape.y - 6];//x上  y右侧
            const c3 = [shape.x + 6, shape.y - 10];
            const c4 = [shape.x - 6, shape.y - 6];
            ctx
                .moveTo(c1[0], c1[1])
                .lineTo(c2[0], c2[1])
                .lineTo(c3[0], c3[1])
                .lineTo(c4[0], c4[1])
                .closePath();
        }
    });
    echarts.graphic.registerShape("CubeLeft", CubeLeft);
    echarts.graphic.registerShape("CubeRight", CubeRight);
    echarts.graphic.registerShape("CubeTop", CubeTop);
    // const MAX = [6000, 6000, 6000, 6000, 6000, 5000];
    // const VALUE = [3012, 1230, 3790, 2349, 1654, 1230];
    var option = {
        tooltip: {
            // trigger: "axis",
            // axisPointer: {
            //   type: "shadow"
            // }
            // 不加他鼠标选入不会待柱状背景
            trigger: "axis",
            axisPointer: {
                type: "shadow"
            },
            // formatter: function (params, ticket, callback) {
            //     const item = params[1];
            //     return item.name + " : " + item.value;
            // }
        },

        // backgroundColor: "#010d3a",
        // title: {
        //     text: "",
        //     top: 32,
        //     bottom: 30,
        //     left: 18,
        //     textStyle: {
        //         color: "#fff",
        //         fontSize: 24
        //     }
        // },
        // legend: {
        //     show: true,
        //     icon: "diamond",
        //     itemHeight: 11,
        //     textStyle: {
        //         color: "#fff",
        //         fontSize: "1.4rem",
        //     }
        // },
        grid: {
            left: "0%",
            top: "4%",
            right: "0%",
            bottom: "4%",
            containLabel: true
        },
        xAxis: {
            type: "category",
            data: [
                "浦东街道",
                "浦西街道",
                "南蒲街道",
                "魏庄街道",
                "恼里镇",
                "丁栾镇"
            ],
            axisLine: {
                show: true,
                lineStyle: {
                    color: "#35456A"
                }
            },

            offset: 10,
            axisTick: {
                show: false
            },
            axisLabel: {
                interval: 0, //代表显示所有x轴标签显示 
                show: true,
                textStyle: {
                    color: "#fff",
                    fontSize: 14,
                    fontFamily: " Source Han Sans SC"
                }
            }
        },
        yAxis: {
            type: "value",
            axisLine: {
                show: false
            },
            splitLine: {
                lineStyle: {
                    type: "dashed",
                    color: "#35466E",
                    width: 1
                }
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                fontSize: 12,
                color: "#A5B6D3" // 文本颜色

            },
            boundaryGap: ["10%", "20%"]
        },
        series: [

            {
                stack: "Ad1",

                type: "custom",
                name: "排名",
                renderItem: (params, api) => {
                    const location = api.coord([api.value(0), api.value(1)]);
                    return {
                        type: "group",
                        children: [
                            {
                                type: "CubeLeft",
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0])
                                },
                                style: {
                                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: "#0067C7"
                                        },
                                        {
                                            offset: 1,
                                            color: "#0085FF"
                                        }
                                    ])
                                }
                            },
                            {
                                type: "CubeRight",
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0])
                                },
                                style: {
                                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: "#0067C7"
                                        },
                                        {
                                            offset: 1,
                                            color: "#0085FF"
                                        }
                                    ])
                                }
                            },
                            {
                                type: "CubeTop",

                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0])
                                },
                                style: {
                                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: "#5ADFFF"
                                        },
                                        {
                                            offset: 1,
                                            color: "#5ADFFF"
                                        }
                                    ])
                                }
                            }
                        ]
                    };
                },
                data: VALUE
            }
        ]
    };
    // 3. 把配置项给实例对象
    myChart.setOption(option);
    // 4. 让图表跟随屏幕自动的去适应
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}

// 地图
function maps() {
    var cityCodeArr = ["4100", '4107']; // 河南 新乡

    const allAreaData = []; // 所有区县的统计数据
    // const cityCodeArr = ["5100", "5101"]; // ["5100", "5101"] [省、市]
    console.log('cityCodeArr111', cityCodeArr)
    if (myChart) {
        myChart.dispose(); // 销毁实例，实例销毁后无法再被使用。
    }
    // 初始化图表
    var myChart = echarts.init(document.querySelector(".maps"));
    // JSON文件(地图数据)路径
    var loadedDataURL = '';
    let cityCode = '';
    cityCode = (cityCodeArr[1]).toString().slice(0, 4) + '00'; // 市级城市json码 4位 后面+00
    loadedDataURL = `./js/geometryCouties/${cityCode}.json`;
    // if (cityCodeArr.length == 2) { // 选择了 省市两级 只展示市
    //     cityCode = (cityCodeArr[1]).toString().slice(0, 4) + '00'; // 市级城市json码 4位 后面+00
    //     loadedDataURL = `./map/geometryCouties/${cityCode}.json`;
    // } else if (cityCodeArr.length == 1) {// 只选择省
    //     cityCode = (cityCodeArr[0]).toString().slice(0, 2); // 省json只有前两位数字
    //     loadedDataURL = `./map/geometryProvince/${cityCode}.json`;
    // } else {
    //     loadedDataURL = `./map/china.json`;
    //     cityCode = 'china';
    // }
    // 显示加载动画效果,可以在加载数据前手动调用该接口显示加载动画，在数据加载完成后调用 hideLoading 隐藏加载动画。
    // myChart.showLoading();
    let mapName = cityCode;
    // 引入JSON文件
    $.get(loadedDataURL, function (geoJson) {

        const data = geoJson.features.map((item, index) => {
            const geoAreaName = item.properties.name; // geo文件中的地理名称
            const currentArea = allAreaData.find(item => {
                return item.name == geoAreaName
            })
            let taskNumber = index, volunteerNumber = index;
            if (currentArea) {
                taskNumber = currentArea.taskNumber;
                volunteerNumber = currentArea.volunteerNumber;
            }
            return {
                name: geoAreaName,
                value: volunteerNumber,
                taskNumber: taskNumber, // 活动总数
                volunteerNumber: volunteerNumber * 10, // 志愿者总数
                // coord: item.properties.center,
                coord: item.properties.centroid,
                selected: true
                // x: 150,
                // y: 150
            }
        })
        console.log('geoJson:', geoJson)
        // 注册地图名字(tongren)和数据(geoJson)

        echarts.registerMap(mapName, geoJson);

        // 隐藏动画加载效果。
        // myChart.hideLoading();

        // 图表配置项
        var option = {
            // title: { // 标题
            //   top: '2%',
            //   text: '3D地图',
            //   subtext: '',
            //   x: 'center',
            //   textStyle: {
            //     color: '#ccc'
            //   }
            // },
            selectedMode: 'multiple', // 选中效果固话
            tooltip: { // 提示框
                show: true,
                trigger: 'item',
                formatter: function (params) {
                    return params.name;
                }
            },
            grid: {
                left: "0%",
                top: "0%",
                right: "3%",
                bottom: "0%",
                containLabel: true
            },
            series: [

                {
                    name: 'map3D',
                    type: "map3D", // map3D / map
                    zoom: 1.6,
                    map: mapName, 
                    label: { // 标签的相关设置
                        show: true, // (地图上的城市名称)是否显示标签 [ default: false ]
                        // distance: 5, // 标签距离图形的距离，在三维的散点图中这个距离是屏幕空间的像素值，其它图中这个距离是相对的三维距离
                        //formatter:, // 标签内容格式器
                        textStyle: { // 标签的字体样式
                            color: '#ffffff', // 地图初始化区域字体颜色
                            fontSize: 14, // 字体大小
                            opacity: 1, // 字体透明度
                            backgroundColor: 'rgba(0,23,11,0)' // 字体背景色
                        },
                        // normal:{
                        //   show:true,
                        //   formatter:function(params){ //标签内容
                        //     // console.log(params)
                        //     return  params.name;
                        //   },
                        //   // lineHeight: 20,
                        //   backgroundColor:'rgba(255,255,255,.9)',
                        //   borderColor:'#80cffd',
                        //   borderWidth:'1',
                        //   padding:[5,15,4],
                        //   color:'#000000',
                        //   fontSize: 12,
                        //   fontWeight:'normal',
                        // },
                        emphasis: {
                            show: true,//鼠标悬入不显示地名
                            // itemStyle: {
                            //   show: "true",
                            //   borderWidth: 4,
                            //   borderColor: "#b2163c", //边框颜色
                            //   areaColor: "#531f67" //鼠标移上去的颜色
                            // },
                            // label: {
                            //   color: "#fff",
                            //   fontWeight: "bold",
                            //   show: true
                            // }
                        }
                    },
                    tooltip: { //提示框组件。
                        alwaysShowContent: true,
                        hoverAnimation: true,
                        trigger: 'item', //触发类型 散点图
                        enterable: true, //鼠标是否可进入提示框
                        transitionDuration: 1, //提示框移动动画过渡时间
                        triggerOn: 'click',
                        formatter: function (params) {
                            // console.log(params.name, 'params.name')
                            if (params.name) {
                                var str = `
                    <div class="map-tooltip">
                      <div class="city-name">${params.name}</div>
                      <div class="city-info">志愿者人数：<span class="city-num">${params.data.volunteerNumber}</span></div>
                      <div class="city-info">活动总数：<span class="city-num">${params.data.taskNumber}</span></div>
                    </div>
                    `
                                return str;
                            }
                        },
                        // backgroundColor: 'rgba(30, 54, 124,1)',
                        // backgroundColor: '#01FEDD',
                        borderWidth: '1px',
                        borderRadius: '4',
                        borderColor: '#00B2AC',
                        textStyle: {
                            color: 'rgba(255,255,255,1)'
                        },
                        padding: [5, 10]
                    },
                    itemStyle: { // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
                        // areaColor: 'rgba(95,158,160,0.5)', // 地图板块的颜色
                        areaColor: '#4286EC', // 地图板块的颜色
                        opacity: 1, // 图形的不透明度 [ default: 1 ]
                        borderWidth: 1, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域 [ default: 0 ]
                        borderColor: '#63D4F8' // 图形描边的颜色。[ default: #333 ]
                    },

                    data: data,
                    // 3d地图添加 markPoint 位置不对
                    /*markPoint:{
                      symbolSize: 45,
                      symbol: 'path://m 0,0 h 48 v 20 h -30 l -6,10 l -6,-10 h -6 z',
                      itemStyle: {
                        normal: {
                          borderColor: '#33CBFF',
                          color:'#33CBFF',
                          borderWidth: 1,            // 标注边线线宽，单位px，默认为1
                          label: {
                            show: true
                          }
                        }
                      },
                      data: data
                    }*/
                }],
        };

        // 设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过setOption完成，ECharts 会合并新的参数和数据，然后刷新图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
        // 动态显示tootip /*map3D中 不生效*/
        // setTimeout(() => {
        //   console.log('dispatchAction');
        //   myChart.dispatchAction({
        //     type: 'showTip',
        //     seriesIndex: 0,
        //     dataIndex: 1
        //   });
        // }, 3000);
    });
} 
